<template>
  <div class="app-container">
    <!-- <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
      @reset-click="handleResetClick" /> -->
    <PageContent ref="contentRef" :gridOptions="gridOptions" :content-config="contentConfig" @addClick="addClick" @edit-click="handleEditClick"
      @export-click="handleExportClick" @toolbarClick="handleToolbarClick" @operat-click="handleOperatClick">
      <template #status="scope">
        <!-- :type="statusList[scope.row[scope.prop]].type" -->
        <el-tag>
          {{ scope.row[scope.prop] }}
        </el-tag>
      </template>
      <template #type="scope">
        <!-- :type="statusList[scope.row[scope.prop]].type" -->
        <el-tag>
          {{ scope.row[scope.prop] }}
        </el-tag>
      </template>
      <template #payment_provider_id="scope">
        <!-- :type="statusList[scope.row[scope.prop]].type" -->
        <el-tag>
          {{ getIdToPro(scope.row[scope.prop])?.name || '--' }}
        </el-tag>
      </template>

      <template #tool="scope">
        <!-- <template v-if="[0,2].includes(scope.row.status)">
          <el-button size="small" type="primary" link @click="toolClick('approve',scope)">
            {{$t('oper.4')}}
          </el-button>
          <el-button size="small" type="primary" link @click="toolClick('deny',scope)">
            {{$t('oper.5')}}
          </el-button>
        </template> -->
      </template>
    </PageContent>

    <!-- 新增 -->
    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
      <template #payment_provider_id="scope">
        <el-select v-model="param[scope.prop]" @change="changeAdd('add','payment_provider_id')">
          <template v-for="option in providersList" :key="option.id">
            <el-option :label="option.name" :value="option.id" />
          </template>
        </el-select>
      </template>
      <template #appends>
        <!-- appendsArr -->
        <template v-for="item in appendsArr">
          <el-form-item :label="item.label">
            <el-input v-model="param[item.name]" />
          </el-form-item>
        </template>
      </template>

    </page-modal>

    <!-- 编辑 -->
    <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
      <template #permissions="scope">
        <el-select multiple collapse-tags v-model="param[scope.prop]" @change="changeAdd('edit')">
          <template v-for="option in providersList" :key="option.id">
            <el-option :label="option.name" :value="option.id" />
          </template>
        </el-select>
      </template>
    </page-modal>
  </div>
</template>

<script setup>
import searchConfig from "./config/search";
import contentConfig from "./config/content";
import addModalConfig from "./config/add";
import editModalConfig from "./config/edit";
import usePage from "@/hooks/usePage";
import { onMounted } from "vue";
import { tableHeightAutoAdjust } from '@/utils/common'
import Api from '@/api/payment/payMethods'
defineOptions({
  name: "paymentPayMethods",
  inheritAttrs: false,
});
const { t } = useI18n();
const gridOptions = reactive({})
const { searchRef, contentRef, addModalRef, editModalRef,
  handleQueryClick, handleResetClick, handleAddClick,
  handleSubmitClick, handleExportClick, } = usePage();
// 点击新增操作
const addClick = () => {
  appendsArr.value = []
  param.value = {}
  handleAddClick()
}
// 编辑操作
const handleEditClick = (row) => {
  // 模拟根据id获取数据进行填充
  editModalRef.value?.setModalVisible(row);
}

const handleOperatClick = (obj) => {
  if (obj.name === "details") {

  }
}
const param = ref({

})
const appendsArr = ref([

])
watch(() => param.value, (e) => {
  console.log(e);
  if (changeType.value === 'edit') {
    editModalRef.value?.setModalVisible(param.value);
  } else if (changeType.value === 'add') {
    addModalRef.value?.setModalVisible(param.value);
  }
}, {
  deep: true,
})
const changeType = ref('')
const changeAdd = (type, key) => {
  changeType.value = type
  console.log(key);
  if (key === 'payment_provider_id') {
    console.log(getIdToPro(param.value.payment_provider_id).collection_secret_config);
    appendsArr.value = getIdToPro(param.value.payment_provider_id).collection_secret_config
  }

}
const providersList = ref([])
const getIdToPro = (id) => {
  return providersList.value.find(item => item.id == id)
}
const getProviders = async () => {
  const { data } = await Api.providers()
  providersList.value = data
  console.log('ddd====', data);
}
onMounted(() => {
  // getProviders()
  // 确保在组件挂载后立即设置高度
  tableHeightAutoAdjust(gridOptions);
})
</script>

<style></style>